<template>
  <div class="block">
    <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
    <div class="user_dropdown">
      <el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出登录</el-dropdown-item>
          <el-dropdown-item>个人信息</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>

</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    }
  }
}
</script>

<style scoped>
.block {
  margin-right: 30px;
  float: right;
  margin-top: 7px;
}

.block el-avatar {
  height: 64px;
  width: 64px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.user_dropdown {
  padding-left: 10px;
  line-height: 64px;
  float: right;
  margin-top: -7px;
  /*margin-top: 10px;*/
  /*vertical-align: center;*/
}
</style>
